<template>
	<view class="apply-container">
		<view class="content">
			<view class="shop-cont flexWrapNo">
				<image :src="goodsInfo.image" class="shop-img"></image>
				<view class="shop-info-box flexWarpColumn">
					<view class="info-box">
						<view>{{goodsInfo.title||'--'}}</view>
						<view class="specs-box flexWrapNo" v-if="goodsInfo.spec&&goodsInfo.spec.length>0">
							<text v-for="(val,i) in goodsInfo.spec" :key="i">
								{{val.spec}}:{{val.specValue}},
							</text>
							x{{detailsInfo.nums}}
						</view>
						<view class="specs-box" v-else>
							默认,x{{detailsInfo.nums}}
						</view>
					</view>
				</view>
				<view class="ststus-box flexWarpColumn">
					<view class="status yellow" v-if="goodsInfo.salestate==1">待商家处理</view>
					<view class="status yellow" v-if="goodsInfo.salestate==2">退款中</view>
					<view class="status yellow" v-if="goodsInfo.salestate==3">待买家寄回</view>
					<view class="status yellow" v-if="goodsInfo.salestate==4">已退款</view>
					<view class="status yellow" v-if="goodsInfo.salestate==5">已退款</view>
					<view class="status yellow" v-if="goodsInfo.salestate==6">商家申请协商</view>
					<view class="status yellow" v-if="goodsInfo.salestate==7">待商家收货</view>
					<view class="status yellow" v-if="goodsInfo.salestate==4||goodsInfo.salestate==5">
						￥{{detailsInfo.refund}}</view>
				</view>
			</view>

			<view class="info-item flexWrap">
				<view class="label">售后类型</view>
				<view class="value">{{detailsInfo.type==1?'仅退款':'退货退款'}}</view>
			</view>
			<view class="info-item flexWrap">
				<view class="label">退款原因</view>
				<view class="value">{{detailsInfo.reason}}</view>
			</view>
			<view class="info-item flexWrap">
				<view class="label">退款金额</view>
				<view class="value">￥{{detailsInfo.refund}}</view>
			</view>
			<view class="info-item flexWrap">
				<view class="label">退款说明</view>
				<view class="value">{{detailsInfo.refundInstructions}}</view>
			</view>
			<view class="certificate-box">
				<view class="label">凭证</view>
				<view class="upload-box">
					<view class="file-item" v-for="(item,index) in photos" :key="index">
						<block v-if="isVideoOrImage(item.url) == 'video'">
							<video :src="item.url" object-fit="cover" class="img"></video>
						</block>
						<block v-else>
							<image :src="item.url" class="img" @tap.stop="previewImage(item.url)" mode="aspectFill">
							</image>
						</block>
					</view>
				</view>
			</view>

			<view class="info-item flexWrap">
				<view class="label">申请时间</view>
				<view class="value">{{detailsInfo.createtime}}</view>
			</view>
			<view class="info-item flexWrap">
				<view class="label">退款编号</view>
				<view class="value">{{detailsInfo.refundNo}}<text @tap="copyText(detailsInfo.refundNo)">复制</text></view>
			</view>
			<view class="info-item flexWrap">
				<view class="label">协商记录</view>
				<view class="value" @tap="consultationsRecordFlag=true">点击查看<uni-icons type="right" size="14"
						color="rgba(255,255,255,0.5)"></uni-icons></view>
			</view>

			<view class="bottom-box btns flexWrapNo">
				<view class="grey-btn" @tap="openCustomerServiceChat()">联系客服</view>
				<block v-if="goodsInfo.salestate!=4&&goodsInfo.salestate!=5&&goodsInfo.salestate!=7&&goodsInfo.salestate!=8">
					<view class="grey-btn" @tap="editApply">修改申请</view>
					<view class="grey-btn" @tap="withdrawApplyFlag=true">撤销申请</view>
				</block>
				<view class="blue-btn" @tap="courierNumberFlag=true" v-if="goodsInfo.salestate==3">填写单号</view>
				<view class="blue-btn" @tap="checkLogistics" v-if="goodsInfo.salestate==7">查看物流</view>
			</view>

			<view class="withdraw-pupup" v-if="withdrawApplyFlag">
				<view class="title">撤销后，若超出订单售后申请 时效，将无法再次发起售后申请</view>
				<view class="btns-box flexWrapNo">
					<view class="btn cancel" @tap="closePopup()">取消</view>
					<view class="btn sure" @tap="handleRevocation">确认</view>
				</view>
			</view>

			<view class="common-bottom-pupup consultationsRecord-popup" v-if="consultationsRecordFlag">
				<image src="/static/user/close.png" class="close-btn" @tap="closePopup()"></image>
				<view class="title">协商记录</view>
				<view class="record-list" v-if="recordList.length>0">
					<view class="record-item" v-for="(val,k) in recordList" :key="k">
						<view class="time">{{val.createTime||'--'}}</view>
						<view class="progress" v-if="val.type==1">买家发起了售后申请</view>
						<view class="progress" v-else-if="val.type==2">买家发起了修改售后申请</view>
						<view class="progress" v-else-if="val.type==3">商家申请协商</view>
						<view class="progress" v-else-if="val.type==4">商家同意售后</view>
						<view class="progress" v-else-if="val.type==5">买家已退货</view>
						<!-- <view class="progress" v-else-if="val.type==6">商家同意退款</view> -->
						<view class="progress" v-else-if="val.type==7">退款关闭,买家已撤销申请</view>
						<view class="remarks" v-if="val.remarks">
							商家回复：<text>{{val.remarks}}</text>
						</view>
					</view>
				</view>
				<view class="quesheng" v-else>暂无协商记录</view>
			</view>

			<view class="common-bottom-pupup courierNumber-popup" v-if="courierNumberFlag">
				<image src="/static/user/close.png" class="close-btn" @tap="closePopup()"></image>
				<view class="title">填写退货物流单号</view>
				<view class="input-box flexWrap" style="margin-top: 28rpx;">
					<view class="label">物流单号</view>
					<input type="text" v-model="expressno" placeholder-style="color:rgba(255,255,255,0.5)"
						placeholder="请填写" />
				</view>
				<view class="input-box flexWrap" @tap="companyFlag=true">
					<view class="label">物流公司</view>
					<view class="flexWrapNo">
						<view class="value" v-if="expressname">{{expressname}}</view>
						<view class="placeholderClass" v-else>请选择</view>
						<text class="icon-more"></text>
					</view>
				</view>
				<view class="sure-btn" @tap="courierSubmit">确定</view>
			</view>

			<view class="common-bottom-pupup company-popup" v-if="companyFlag">
				<image src="/static/user/close.png" class="close-btn" @tap="companyFlag=false"></image>
				<view class="title">选择物流公司</view>
				<view class="company-list" v-if="logisticsCompanyList.length>0">
					<view class="company-item flexWrap" v-for="(item,index) in logisticsCompanyList" :key="index"
						@tap="chooseCompany(item.name)">
						<view class="company">{{item.name}}</view>
						<image src="/static/user/select-icon.png" mode="" v-if="item.name==expressname"></image>
						<image src="/static/order/notselect-icon.png" mode="" v-else></image>
					</view>
				</view>
				<view class="quesheng" v-else>暂无数据</view>
				<view class="sure-btn" @tap="companyFlag=false">确定</view>
			</view>

			<view class="common-bottom-pupup logistics-popup" v-if="logisticsFlag">
				<image src="/static/user/close.png" class="close-btn" @tap="closePopup()"></image>
				<view class="title">物流明细</view>
				<view class="express-delivery flexWrapNo" v-if="logisticsInfo">
					<text class="name">{{logisticsInfo.expName}}</text>
					<text>{{logisticsInfo.number}}</text>
					<text class="copy" @tap="copyText(logisticsInfo.number)">复制</text>
				</view>

				<view class="deliver-box" v-if="logisticsInfo">
					<view class="deliver-item" v-for="(item,index) in logisticsSite" :key="index">
						<view class="flexWrapNo">
							<block v-if="index==0">
								<text class="status" v-if="logisticsInfo.deliverystatus==0">快递收件（揽件）</text>
								<text class="status" v-if="logisticsInfo.deliverystatus==1">在途中</text>
								<text class="status" v-if="logisticsInfo.deliverystatus==2">正在派件</text>
								<text class="status" v-if="logisticsInfo.deliverystatus==3">已签收</text>
								<text class="status" v-if="logisticsInfo.deliverystatus==4">派送失败</text>
								<text class="status" v-if="logisticsInfo.deliverystatus==5">疑难件</text>
								<text class="status" v-if="logisticsInfo.deliverystatus==6">退件签收</text>
							</block>
							<text class="time">{{item.time}}</text>
						</view>
						<view class="desc">{{item.status}}</view>
					</view>
				</view>
				<view class="quesheng" v-if="!logisticsInfo">暂无物流信息</view>
				<view class="sure-btn" @tap="closePopup()">确定</view>
			</view>
			<view class="common-bottom-pupup overtime-popup" v-if="overtimeFlag">
				<image src="/static/user/close.png" class="close-btn" @tap="closePopup()"></image>
				<view class="title">抱歉，订单已过售后申请失效</view>
				<view class="sub-desc">如您对商品售后有疑问，可联系商家处理</view>
				<view class="sure-btn" @tap="openCustomerServiceChat()">联系客服</view>
			</view>
			<view class="mask-wrap"
				v-if="withdrawApplyFlag||consultationsRecordFlag||courierNumberFlag||companyFlag||logisticsFlag||overtimeFlag">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aftersalesId: '',
				detailsInfo: {},
				goodsInfo: {},
				photos: [],
				withdrawApplyFlag: false, // 撤销申请
				consultationsRecordFlag: false, // 协商记录
				recordList: [], // 协商记录列表
				courierNumberFlag: false, // 填写单号
				expressno: '',
				expressname: '', // 物流公司
				companyFlag: false,
				logisticsCompanyList: [],

				logisticsFlag: false,
				logisticsInfo: {},
				logisticsSite: [],

				overtimeFlag: false,
				corpId:"",
				customerUrl:""
			}
		},
		onLoad(ops) {
			this.aftersalesId = ops.afterSalesId
			this.getSalesDetails()

			this.getShipperList()
			this.getConsultationsRecord()
			this.getCustomerInfo()
		},
		methods: {
			// 获取售后详情
			getSalesDetails() {
				this.$request.post(this.$api.salesDetails, {
					aftersalesId: this.aftersalesId
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.detailsInfo = data
						this.detailsInfo.createtime = this.$tools.formatDate(this.detailsInfo.createtime, 1)
						this.photos = data.photos

						this.getBugDeatils()
						if (this.detailsInfo.expressno) {
							this.getLogisticsInfo()
						}
					}
				})
			},

			// 获取购买详情
			getBugDeatils() {
				this.$request.get(this.$api.orderBuyDetails, {
					orderId: this.detailsInfo.orderId,
					orderGoodsId: this.detailsInfo.orderGoodsId
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.goodsInfo = data
					}
				})
			},

			// 获取物流公司
			getShipperList() {
				this.$request.post(this.$api.getShipperList, {}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.logisticsCompanyList = data
					}
				})
			},

			// 复制信息
			copyText(text) {
				let that = this
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1000
						});
					}
				});
			},

			formatReason(val) {
				const data = this.refundReasonList.find((obj) => obj.value === val)
				return data.label || ''
			},

			closePopup() {
				this.withdrawApplyFlag = false
				this.consultationsRecordFlag = false
				this.courierNumberFlag = false
				this.logisticsFlag = false
				this.overtimeFlag = false
			},

			// 判断是视频还是图片
			isVideoOrImage(file) {
				let videoRegex = /(\mp4|\avi|\mkv)$/i
				let imgRegex = /(\jpg|\jpeg|\png|\gif|\webp)$/i
				if (imgRegex.test(file)) {
					return 'image'
				} else if (videoRegex.test(file)) {
					return 'video'
				} else {
					return 'unknown'
				}
			},

			// 修改申请
			editApply() {
				if (!this.detailsInfo.expirationDate || !this.isGreater(this.detailsInfo.expirationDate)) {
					uni.navigateTo({
						url: '/shop-mall/applyAftesales?orderId=' + this.detailsInfo.orderId + '&orderGoodsId=' +
							this.detailsInfo.orderGoodsId + '&aftersalesId=' + this.detailsInfo.id
					})
				} else {
					this.overtimeFlag = true
				}
			},

			// 是否过了售后时间
			isGreater(dateTime) {
				// let time='2024-09-02 14:30:00'
				// let specificDateTime = new Date(time)
				let specificDateTime = new Date(dateTime)
				let currentDateTime = new Date()
				return currentDateTime > specificDateTime
			},

			// 撤销申请
			handleRevocation() {
				this.$request.post(this.$api.withdrawalApply, {
					aftersalesId: this.aftersalesId,
					goodsSkuId: this.detailsInfo.goodsSkuId,
					orderGoodsId: this.detailsInfo.orderGoodsId,
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data
						} = res
						let pages = getCurrentPages(); //当前页
						let beforePage = pages[pages.length - 2]; //上个页面
						this.$tools.showToast('撤销申请成功')
						beforePage.$vm.getOrderInfo();
						this.closePopup()
						setTimeout(()=>{
							uni.navigateBack({delta:1})
						},1000)
					}
				})
			},

			// 物流单号提交
			async courierSubmit(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'courierSubmit', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: async() => {
						if(!this.expressno){
							this.$tools.showToast('请填写物流单号')
							return
						}else if(!this.expressname){
							this.$tools.showToast('请选择物流公司')
							return
						}
						
						let result=await this.judgeExpressno()
						if(result){
							this.$request.post(this.$api.inputWaybillNumber, {
								aftersalesId: this.aftersalesId,
								expressno: this.expressno,
								expressname: this.expressname,
							}, {
								isJava: true
							}).then(res => {
								if (res.code == 200) {
									let {
										data
									} = res
									this.$tools.showToast('提交成功')
									this.getSalesDetails()
									this.closePopup()
									this.expressno=''
									this.expressname=''
								}
							})
						}
					},
				})
			},
			// 判断快递单号是否正确
			judgeExpressno() {
			    return new Promise((resolve, reject) => {
					this.$request.post(this.$api.logisticsInfo, {
						no:this.expressno,
					}, {
						isJava: true
					}).then(res => {
			            if (res.code == 200) {
							resolve(res.data)
			            } else {
			                reject(res.msg)
			            }
			        }).catch(err => {
			            reject(err)
			        })
			    })
			},
			// 选择物流公司
			chooseCompany(name) {
				this.expressname = name
			},

			// 查看物流
			checkLogistics() {
				// this.getLogisticsInfo()
				this.logisticsFlag = true
			},

			// 查询快递信息
			getLogisticsInfo() {
				this.$request.post(this.$api.logisticsInfo, {
					no: this.detailsInfo.expressno,
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data
						} = res
						this.logisticsInfo = data
						this.logisticsSite = data.list
					}
				})
			},

			// 协商记录
			getConsultationsRecord() {
				this.$request.post(this.$api.consultationsRecord, {
					aftersalesId: this.aftersalesId
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data
						} = res
						this.recordList = data
					}
				})
			},

			getCustomerInfo() {
				this.$request.post(this.$api.getCompaniesWeChatKfUrl, {}, {
					isJava: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 200) {
						this.customerUrl = data.customerUrl
						this.corpId = data.enterpriseId
					}
				})
			},

			// 联系客服
			openCustomerServiceChat() {
				let that = this
				wx.openCustomerServiceChat({
					extInfo: {
						url: that.customerUrl
					},
					corpId: that.corpId,
					success(res) {

					},
					complete(com) {
						console.log(com)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.apply-container {
		padding: 28rpx;
	}

	.content {
		background: #1D1C5C;
		border-radius: 24rpx;
		padding: 28rpx;
	}

	.shop-cont {
		gap: 14rpx;
		align-items: flex-start;
		position: relative;
		.shop-img {
			width: 168rpx;
			height: 168rpx;
			border-radius: 6rpx;
			flex: none;
		}

		.shop-info-box {
			font-size: 28rpx;
			color: #FFFFFF;
			height: 168rpx;
			justify-content: space-between;
			flex: 1;

			.info-box {
				.specs-box {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					margin-top: 8upx;
					gap: 14rpx;
				}
			}

			.price {
				font-weight: bold;
				font-size: 24rpx;

				.symbol {
					font-size: 20rpx;
					margin-right: 6rpx;
					font-weight: unset;
				}
			}
		}

		.ststus-box {
			align-items: flex-end;
			gap: 8rpx;
			position: absolute;
			right: 10rpx;
			width: 200upx;
			.status {
				font-weight: 500;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.5);
				text-align: right;
			}

			.yellow {
				color: #FFAA00;
			}
		}
	}

	.info-item {
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #FFFFFF;

		&:first-child {
			margin-top: 24rpx;
		}

		.label {
			font-weight: 500;

		}

		.value {
			color: rgba(255, 255, 255, 0.5);

			text {
				color: #26BCFD;
				margin-left: 10rpx;
			}
		}

	}

	.certificate-box {
		margin-top: 20rpx;

		.label {
			color: #FFFFFF;
			font-weight: 500;
			font-size: 24rpx;
		}

		.upload-box {
			margin-top: 14rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.file-item {
				width: 132rpx;
				height: 132rpx;
				position: relative;

				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.bottom-box {
		height: 184rpx;
		border-top: 1rpx solid #232428;
		background: #1D1C5C;
		padding: 26rpx 40rpx 40rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 10rpx;

		.grey-btn {
			width: 168rpx;
			height: 72rpx;
			background: #26BCFD;
			border-radius: 36rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}

		.blue-btn {
			width: 168rpx;
			height: 72rpx;
			background: #26BCFD;
			border-radius: 40rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}
	}

	.withdraw-pupup {
		width: 600rpx;
		height: 266rpx;
		background: #1D1C5C;
		border-radius: 24rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -100%);
		z-index: 1000;

		.title {
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			padding: 42rpx 48rpx;
		}

		.btns-box {
			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
			height: 91rpx;
			line-height: 91rpx;

			.btn {
				width: 50%;
				font-weight: 500;
				font-size: 34rpx;
				text-align: center;
			}

			.cancel {
				color: rgba(255, 255, 255, 0.5);
				border-right: 1rpx solid rgba(255, 255, 255, 0.1);
			}

			.sure {
				color: #26BCFD;
			}
		}
	}

	.common-bottom-pupup {
		width: 100%;
		background: #1D1C5C;
		border-radius: 24rpx;
		padding: 40rpx;
		padding-bottom: 62rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;

		.title {
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.close-btn {
			width: 52upx;
			height: 52upx;
			position: absolute;
			top: 28upx;
			right: 28upx;
		}

		.sure-btn {
			height: 96rpx;
			background: linear-gradient(90deg, #598FFF 0%, #2662DE 100%);
			border-radius: 48rpx;
			line-height: 96rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 40rpx;
		}

		.quesheng {
			font-size: 30upx;
			line-height: 34upx;
			color: #FFFFFF;
			margin: 180upx auto;
			width: 300rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			border-radius: 88rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.1);
		}
	}

	.consultationsRecord-popup {
		min-height: 600rpx;

		.record-list {
			max-height: 900rpx;
			overflow-y: auto;

			.record-item {
				margin-top: 26rpx;

				.time {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.5);
				}

				.progress {
					margin-top: 10rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.remarks {
					margin-top: 10rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;

					text {
						color: rgba(255, 255, 255, 0.5);
					}
				}
			}
		}
	}

	.courierNumber-popup {
		.input-box {
			padding: 24rpx 0;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
			font-size: 24rpx;
			color: #FFFFFF;

			.label {
				font-weight: 500;
				font-size: 28rpx;
			}

			input {
				flex: 1;
				font-size: 24rpx;
				text-align: right;
			}

			.placeholderClass {
				color: rgba(255, 255, 255, 0.5);
				font-size: 24rpx;
			}

			.icon-more {
				border-color: rgba(255, 255, 255, 0.5);
				flex-shrink: 0;
			}
		}

		.sure-btn {
			margin-top: 148rpx;
		}
	}

	.company-popup {
		min-height: 750rpx;

		.company-list {
			margin-top: 24rpx;
			max-height: 800rpx;
			overflow-y: auto;

			.company-item {
				padding: 24rpx 0;
				border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);

				.company {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}
	}

	.logistics-popup {
		.express-delivery {
			margin-top: 28rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 27rpx 0;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);

			.name {
				font-size: 32rpx;
				margin-right: 20rpx;
			}

			.copy {
				color: #598FFF;
				margin-left: 10rpx;
			}
		}

		.deliver-box {
			max-height: 800rpx;
			overflow-y: auto;

			.deliver-item {
				margin-top: 30rpx;

				.status {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-right: 14rpx;
				}

				.time {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.5);
				}

				.desc {
					margin-top: 14rpx;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.5);
					letter-spacing: 2rpx;
				}
			}
		}


	}

	.overtime-popup {
		.title {
			margin-top: 114rpx;
		}

		.sub-desc {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.5);
			margin-top: 14rpx;
			text-align: center;
		}

		.sure-btn {
			margin-top: 111rpx;
		}
	}
</style>